<template>
  <div class="staff-search-page-wrap">

    <div class="staff-search-box">
      <div class="staff-key-box">
        <img src="../../../images/search_icon.png" class="pic1" onclick="return false"/>
        <input class="staff-key" placeholder="请输入姓名或联系方式" v-model="staffKey" maxlength="11" @input="checkStaffIcon"/>
        <img src="../../../images/close.png" class="pic2" onclick="return false" v-if="showKeyIcon"
             @click="clearKeyVal"/>
      </div>
      <span class="staff-search-btn" @click="searchStaffKey">搜索</span>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      :immediate-check="false"
      class="van-shop-staff-item"
    >
      <div class="shop-staff-list" v-for="(staff,index) in staffList" :key="index">

        <div class="shop-staff-item-box1">
          <div class="shop-staff-item-info" :class="{'shop-staff-item-close':staff.staffMark}">
            <img :src="staff.userUrl" class="pic1" v-if="staff.userUrl"/>
            <span class="pic2" v-else></span>

            <span class="shop-staff-name">{{staff.userName}}</span>
            <span class="shop-staff-status-work" v-if="staff.workStatus == 1">在职</span>
            <span class="shop-staff-status-leave" v-else-if="staff.workStatus == 2">离职</span>
            <img src="../../../images/call.png" class="pic3" @click="callMobile(assistant.userTel)"/>

            <div class="down-box" v-if="staff.staffMark" @click="open(index)">
              <img src="../../../images/down_down.png" class="pic4"/>
            </div>
            <div class="down-box" v-else @click="close(index)">
              <img src="../../../images/down_up.png" class="pic4"/>
            </div>
          </div>
        </div>

        <div class="shop-staff-item-box2" v-show="!staff.staffMark">
          <span class="entry-company">入职企业：{{staff.mechanismName}}</span>
          <span class="entry-time">入职日期：{{staff.beginTime}}</span>
        </div>
      </div>
    </van-list>

    <v-empty :logo="require('../../../images/no_data.png')" title="没有数据记录~"
             v-if="staffList.length == 0 && !loading"></v-empty>

    <div class="load-shade-box" v-show="showShade"></div>
  </div>
</template>

<script>
  import {getMyStaffList} from "../../../axios/api";
  import {formatDate} from "../../../config/util";
  import empty from '../../../components/empty';

  export default {
    data() {
      return {
        staffKey: "",
        userMark: "",
        staffList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        showShade: false,
        showKeyIcon: false
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      checkStaffIcon() {
        if (this.staffKey.length > 0) {
          this.showKeyIcon = true;
        } else {
          this.showKeyIcon = false;
        }
      },
      clearKeyVal() {
        this.staffKey = '';
        this.showKeyIcon = false;
      },
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryMyStaffList();
            this.timer = null;
          }, 500)
        }
      },
      searchStaffKey() {
        if (this.staffKey == "" || this.staffKey == undefined || this.staffKey == null) {
          this.$vux.toast.text("请输入姓名或联系方式", "middle");
          return;
        }
        this.page = 1;
        this.size = 20;
        this.staffList = [];
        this.queryMyStaffList();
      },
      queryMyStaffList() {
        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size,
          "userName": this.staffKey
        };
        this.showShade = true;
        getMyStaffList(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.staffList = this.staffList.concat(res.data);
              this.staffList.forEach((value) => {
                this.$set(value, "staffMark", true);
                if (value.beginTime) {
                  value.beginTime = formatDate(new Date(value.beginTime), 'yyyy-MM-dd');
                }
              });

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.staffList.length >= res.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
          this.showShade = false;
        });
      },
      callMobile(phone) {
        window.location.href = 'tel://' + phone;
      },
      open(index) {//展开
        for (let i = 0, length = this.staffList.length; i < length; i++) {
          if (index == i) {
            this.staffList[i].staffMark = false;
            break;
          }
        }
      },
      close(index) {//关闭
        for (let i = 0, length = this.staffList.length; i < length; i++) {
          if (index == i) {
            this.staffList[i].staffMark = true;
            break;
          }
        }
      },
    },
    components: {
      "v-empty": empty
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .staff-search-page-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .staff-search-box {
      position: fixed;
      top: 0;
      z-index: 100;
      .wh(100%, 1.2rem);
      background: #3CAFFF;
      display: flex;
      align-items: center;
      .staff-key-box {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        .wh(8.213rem, 0.8rem);
        background: rgba(255, 255, 255, 1);
        border-radius: 0.387rem;
        .pic1 {
          .wh(0.533rem, 0.533rem);
          padding-left: 0.24rem;
          padding-right: 0.267rem;
        }
        .pic2 {
          margin-left: auto;
          margin-right: 0.16rem;
          .wh(0.48rem, 0.48rem);
        }
        .staff-key {
          .wh(80%, 0.6rem);
          line-height: 0.6rem;
          .size-color(0.373rem, rgba(51, 51, 51, 1));
        }
      }
      .staff-search-btn {
        .fj(center, center);
        .wh(1.6rem, 100%);
        .size-color(0.427rem, rgba(255, 255, 255, 1));
      }
    }
    .van-shop-staff-item {
      position: absolute;
      top: 1.467rem;
      .wh(100%, auto);
      .shop-staff-list {
        display: flex;
        flex-direction: column;
        .wh(100%, auto);
        .shop-staff-item-box1 {
          .wh(100%, auto);
          background: #FFF;
          .shop-staff-item-info {
            display: flex;
            align-items: center;
            .wh(96.8%, 1.333rem);
            background: #FFF;
            margin-left: 0.32rem;
            .pic1 {
              .wh(0.88rem, 0.88rem);
              border-radius: 50%;
            }
            .pic2 {
              .wh(0.88rem, 0.88rem);
              background: rgba(242, 242, 242, 1);
              border-radius: 50%;
            }
            .shop-staff-name {
              .ellipsis(2.4rem);
              padding-left: 0.387rem;
              padding-right: 0.347rem;
              .size-color(0.427rem, rgba(51, 51, 51, 1));
            }
            .shop-staff-status-work {
              .wh(0.96rem, 0.48rem);
              border: 0.027rem solid rgba(60, 175, 255, 1);
              border-radius: 0.053rem;
              .size-color(0.347rem, rgba(60, 175, 255, 1));
              text-align: center;
              line-height: 0.48rem;
            }
            .shop-staff-status-leave {
              .wh(0.96rem, 0.48rem);
              text-align: center;
              line-height: 0.48rem;
              border: 0.027rem solid rgba(255, 166, 61, 1);
              border-radius: 0.053rem;
              .size-color(0.347rem, rgba(255, 166, 61, 1));
            }
            .pic3 {
              margin-left: 0.8rem;
              .wh(0.533rem, 0.533rem);
            }
            .down-box {
              margin-left: auto;
              margin-right: 0.32rem;
              .fj(center, center);
              .wh(0.8rem, 0.8rem);
              .pic4 {
                .wh(0.373rem, 0.373rem);
              }
            }
          }
          .shop-staff-item-close {
            border-bottom: 0.027rem solid #f5f5f5;
          }
        }
        .shop-staff-item-box2 {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          background: #f5f5f5;
          .wh(100%, 1.6rem);
          .entry-time {
            padding-left: 0.4rem;
            .size-color(0.347rem, rgba(153, 153, 153, 1));
          }
          .entry-company {
            padding-bottom: 0.2rem;
            padding-left: 0.4rem;
            .size-color(0.347rem, rgba(153, 153, 153, 1));
          }
        }
      }
    }
    .load-shade-box {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
  }
</style>
